<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <style>
        #app {
            width: 80%;
            margin: 0 auto;
            padding: 0;
        }
    </style>
</head>
<body>
  <div id="app">
      <div>
          <el-row style="height: 50px;line-height: 50px;background-color: #cccccc">
              <el-col :span="12" :offset="10">
                  <div >
                      欢迎光临蜗牛书城 &nbsp;|&nbsp;
                      <span th:if="${#strings.isEmpty(session.userInfo)}">
                          <a href="">登录</a> | <a href="">注册</a>
                      </span>

                      <span th:if="${!#strings.isEmpty(session.userInfo)}" >
                          &nbsp; <a href="">[[${session.userInfo.username}]]</a>
                      </span>
                      &nbsp;|&nbsp;<a href="">我的订单</a>  &nbsp;|&nbsp;
                      <a href="">我的购物车</a>
                      <span th:if="${!#strings.isEmpty(session.userInfo)}">
                          &nbsp;|&nbsp;<a href="">退出</a>
                      </span>
                  </div>
              </el-col>
          </el-row>
      </div>

      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="16" :offset="4">
                  <div>
                    <table>
                        <tr>
                            <td>
                                <el-image
                                        style="width: 100px; height: 100px;cursor: pointer"
                                        src="http://localhost:10001/a.jpg"
                                        fit="cover"></el-image>
                            </td>
                            <td style="padding-left: 15px">
                                <el-descriptions title="图书信息:">
                                    <el-descriptions-item label="书名:">{{book.bname}}</el-descriptions-item>
                                    <el-descriptions-item label="作者">{{book.author}}</el-descriptions-item>
                                    <el-descriptions-item label="价格:">{{book.price}}元</el-descriptions-item>
                                    <el-descriptions-item label="出版社:">{{book.publish}}</el-descriptions-item>
                                    <el-descriptions-item label="出版日期:">{{book.publishdate}}</el-descriptions-item>
                                    <el-descriptions-item label="库存:">{{storeCount}}</el-descriptions-item>
                                </el-descriptions>
                            </td>
                        </tr>
                        <tr style="height: 200px">
                            <td colspan="2">
                                <el-input-number v-model="num" @change="handleChange" :min="1" :max="book.storecount" label="描述文字"></el-input-number>
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                                <el-button type="danger" @click="addCart">加入购物车</el-button>
                            </td>
                        </tr>
                    </table>
                  </div>
              </el-col>
          </el-row>
      </div>

      <div style="margin-top: 30px">
          <el-row>
              <el-col :span="12" :offset="6">
                  <div style="text-align: center">
                      版权所有，翻版必究
                  </div>
              </el-col>
          </el-row>
      </div>
  </div>

  <script>
      let vueApp = new Vue({
          el:"#app",
          data:{
              book:{},
              num:1,
              storeCount:0
          },
          methods:{
              addCart(){
                  let url = "./cart/addCart/"+this.num+"/"+this.book.id ;
                  axios.get(url).then((res)=>{
                      if (res.data.code == 200) {
                          this.$message({
                              type:'success',
                              message:res.data.msg,
                              duration:2000
                          })
                          this.initBookByKey();
                      }else {
                          this.$message({
                              type:'error',
                              message:res.data.msg,
                              duration:2000
                          })
                      }
                  })
              },
              handleChange(value) {
                  if (value > this.book.storecount) {
                      this.$message({
                          type:'error',
                          message:'库存告急！！！',
                          duration:2000
                      })
                      this.num = this.book.storecount;
                      return ;
                  }
                  console.log(value)
                  this.storeCount = this.book.storecount-value;
              },
             initBookByKey(){
                 let bookId = localStorage.getItem("bookId");
                 let url = "./book/getBookeByKey/"+bookId ;
                 axios.get(url).then((res)=>{
                     if (res.data.code == 200) {
                         this.book = res.data.data ;
                         this.storeCount = res.data.data.storecount;
                     }else {
                         this.$message({
                             type:'error',
                             message:res.data.msg,
                             duration:1000
                         })
                     }
                 })
             }
          },
          created(){
             this.initBookByKey();
          }
      })
  </script>

</body>
</html>